<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      text-align: center;
    }

    .box {
      margin: 0 auto;
      width: 880px;
    }

    .title {
      background: #ccc;
    }

    table {
      height: 200px;
      width: 200px;
      font-size: 12px;
      text-align: center;
      float: left;
      margin: 10px;
      font-family: arial;
    }
  </style>
</head>

<body>
  <script>
    var year = parseInt(prompt('输入年份：', '2017'));
    document.write(calendar(year));
    // 定义年历生成函数
    function calendar(y) {
      // 获取指定年份1月1日的星期数值
      var w = new Date(y, 0).getDay();
      var html = '<div class="box">';
      // 拼接每个月份的表格
      for (var m = 1; m <= 12; ++m) {
        html += '<table>';
        html += '<tr class="title"><th colspan="7">' + y + ' 年 ' + m + ' 月</th></tr>';
        html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';

        // 获取月份m共有多少天
        var max = new Date(y, m, 0).getDate();

        html += '<tr>';                         // 开始<tr>标签
        for (var d = 1; d <= max; ++d) {
          if (w && d == 1) {                  // 如果该月的第1天不是星期日，则填充空白
            html += '<td colspan="' + w + '"> </td>';
          }
          html += '<td>' + d + '</td>';
          if (w == 6 && d != max) {           // 如果星期六不是该月的最后一天，则换行
            html += '</tr><tr>';
          } else if (d == max) {               // 该月的最后一天，闭合<tr>标签
            html += '</tr>';
          }
          w = (w + 1 > 6) ? 0 : w + 1;
        }
        html += '</table>';
      }
      html += '</div>';
      return html;
    }
  </script>

</body>

</html>